@import 'common';

$guideFontSize: .93vh;
$normalFontSize: 24px;
$titleFontSize: 1.39vh;

#content {
  width: 100%;
  height: 100%;
}

.App {
  width: 100%;
  height: 100%;
}

.App-header {
  width: 100%;
  height: 7vh;
  background: url("../images/title.png") center no-repeat;
  background-size: contain;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  position: relative;
  .title {
    font-size: 3.7vh;
  }
  .date, .time {
    font-size: 1.85vh;
    color: #0ff;
    position: absolute;
    top: 12%;
  }
  .date {
    left: 16.5%;
  }
  .time {
    right: 16.5%;
  }
}

.App-content {
  width: 100vw;
  height: 93vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-top: 1vh;

  div {
    //height: 100%;
  }

  .content-left,.content-center,.content-right {
    //margin-top: 1%;
  }

  .content-left {
    width: 22.84vw;
    margin-left: 1.3vw;
    position: relative;

    .left-center {
      background: url('../images/left-center.png') center no-repeat;
      background-size: 100% 100%;
      width: 100%;
      & > div:nth-child(2) {
        margin: 1.85vh 0;
      }
    }

    .left-down {
      width: 100%;
      background: url('../images/left-down.png') center no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(1) {
        margin-bottom: 1.85vh;
      }
    }

    /*.left-up {
      width: 130%;
      height: 12.2%;
      position: absolute;
      top: -1%;
      left: -15%;
      background: url("../images/left-up.png") center no-repeat;
      background-size: contain;
      z-index: -1;
    }

    .left-center {
      width: 120%;
      height: 37%;
      position: absolute;
      top: 11.5%;
      left: -10%;
      background: url('../images/left-center.png') center no-repeat;
      background-size: contain;
      z-index: -1;
    }

    .left-down {
      width: 107%;
      height: 43.5%;
      position: absolute;
      bottom: 4%;
      left: -3.5%;
      background: url('../images/left-down.png') center no-repeat;
      background-size: contain;
      z-index: -1;
    }*/

    & > div {
      //margin: 4% 0;
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .content-left-tempHumiDust {
      width: 100%;
      height: 10.37vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      background: url('../images/left-up.png') center no-repeat;
      background-size: 100% 100%;

      div {
        width: 33%;
        height: 100%;
      }
      .temperature div:first-child {
        background: url("../images/temperature.png") center no-repeat;
        background-size: contain;
      }
      .humidity div:first-child {
        background: url("../images/humidity.png") center no-repeat;
        background-size: contain;
      }
      .dust div:first-child {
        background: url("../images/activation.png") center no-repeat;
        background-size: contain;
      }

    }

    .content-left-tempHumiTrend {
      width: 100%;
      height: 14.6vh;
    }

    .content-left-dustTrend {
      width: 100%;
      height: 12vh;
    }

    .content-left-energy {
      width: 100%;
      height: 5.56vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;

      .energy {
        width: 18%;
        height: 100%;
        background: url("../images/energy.png") no-repeat;
        background-size: 100% 100%;

        .energy-title {
          height: auto;
          text-align: center;
          margin-top: .7vh;
          font-size: .93vh;
        }

        .energy-data {
          height: auto;
          text-align: center;
          margin-top: .7vh;
          font-size: 1.85vh;
          color: #fbff7f;
        }
      }
    }

    .content-left-lineStatus {
      width: 100%;
      //height: 8.15vh;
      .lineStatus-title {
        font-size: $titleFontSize;
        color: #00ffff;
        height: auto;
        //margin-top: 1.85vh;
        margin-bottom: 0.46vh;
      }

      .lineStatus-guide {
        text-align: right;
        margin-bottom: .93vh;
        margin-right: 1vw;
        height: auto;
        font-size: $guideFontSize;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
        span {
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
          margin-left: 1.09vw;
          i {
            display: inline-block;
            width: 1vh;
            height: 1vh;
            border-radius: 1vh;
            margin-right: .26vw;
          }
          .running {
            background-color: #7fffaa;
          }
          .idle {
            background-color: #fbff7f;
          }
          .down {
            background-color: #ff4c76;
          }
        }
      }

      .lineStatus-gantt {
        width: 90%;
        height: 2vh;
        margin: 0 auto;
        border-radius: 2rem;
        border: 1px solid #035ddc;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .dashed-line {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50%;
          width: 99%;
          height: 0;
          border: 1px dashed #4f5e79;
          z-index: -1;
        }
        .gantt {
          width: 80%;
          height: 120%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          div {
            height: 120%;
          }
          div:first-child {
            border-radius: .3rem 0 0 .3rem;
          }
          div:last-child {
            border-radius: 0 .3rem .3rem 0;
          }
        }
      }

      .lineStatus-time {
        display: flex;
        height: auto;
        flex-flow: row nowrap;
        justify-content: space-around;
        margin-top: .93vh;
        font-size: $guideFontSize;
        span {
          display: inline;
          font-size: $titleFontSize;
        }
        .running {
          color: #7fffaa;
        }
        .idle {
          color: #fbff7f;
        }
        .down {
          color: #ff4c76;
        }
      }
    }

    .content-left-equipmentStatus {
      width: 100%;
      height: 28vh;
      //border: 1px solid pink;
      .orderID {
        height: auto;
        color: #00ffff;
        font-size: $titleFontSize;
        margin-bottom: 2vh;
        //margin-left: 0.8%;
      }

      .equipment-content {
        /*background: url("../images/status-background.png") 1rem 0 no-repeat;
        background-size: contain;*/
        width: 100%;
        height: 90%;
        //margin-left: 7%;
        display: flex;
        flex-flow: row nowrap;
        margin-left: 5%;
      }

      .equipment-status-down {
        width: 10%;
        height: 55%;
        margin-top: 10%; // 保证下箭头垂直居中对齐
        margin-left: -5%;
        background: url("../images/equipment-status-down.png") left no-repeat;
        background-size: contain;
      }

      .equipmentStatus {
        height: 50%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        .equipment-status-right {
          width: 10%;
          height: 60%;
          background: url("../images/equipment-status-right.png") center no-repeat;
          background-size: contain;
        }
        .equipment-status-left {
          width: 10%;
          height: 60%;
          background: url("../images/equipment-status-left.png") center no-repeat;
          background-size: contain;
        }

        .equipment {
          position: relative;
          width: 25%;
          display: flex;
          flex-flow: column nowrap;
          justify-content: flex-start;
          align-items: center;
          .equipment-img {
            display: inline-block;
            width: 100%;
          }

          .equipment-lamp {
            width: 1.5vh;
            height: 1.5vh;
            position: absolute;
            top: 5%;
            left: 5%;
            border-radius: 1vh;
            //background-color: #7fffaa;//
          }

          .equipment-info {
            width: 300%;
            height: auto;
            text-align: center;
            div {
              height: auto;
              width: 100%;
              font-size: $guideFontSize;
              //display: none;
              transform: scale(.7);//
            }
          }
        }

      }
    }

  }

  .content-center {
    width: 48vw;
    position: relative;

    & > div {
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .center-up {
      background: url("../images/center-up.png") center no-repeat;
      background-size: 100% 100%;
      width: 100%;
    }

    .linkageMap-title {
      height: auto;
      text-align: center;
      font-size: $titleFontSize;
      color: #00ffff;
      position: relative;
      margin: 1vh 0 .93vh 0;
      .linkageMap-title-guide {
        width: 70%;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        font-size: $guideFontSize;
        color: #fff;
        div {
          width: auto;
          margin-right: 1.04vw;
        }
        i {
          display: inline-block;
          width: 1vh;
          height: 1vh;
          border-radius: 1vh;
          margin: 0 .26vw;
        }
        .idle {
          background-color: #fbff7f;
        }
        .running {
          background-color: #7fffaa;
        }
        .wait {
          background-color: #fff;
        }
        .down {
          background-color: #ff4c76;
        }
      }
      .guide-left {
        left: 0;
        justify-content: flex-start;
      }
      .guide-right {
        right: 0;
        justify-content: flex-end;
        > div {
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .content-center-important {
      width: 100%;
      height: 55vh;
      background: url("../images/center-down.png") center no-repeat;
      background-size: 100% 100%;
      padding: 0 1vw;
      box-sizing: border-box;
      .important-up {
        width: 100%;
        height: auto;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin-top: 2%;
        & > div {
          width: 25%;
          height: auto;
          border-radius: 1rem;
          img {
            width: 100%;
          }
        }
        .important-arrow {
          width: 3%;
        }
      }
      .important-down {
        width: 100%;
        height: 50%;
        margin-top: 5%;
        position: relative;
        .important-forecast {
          width: 50%;
          height: 100%;
          & > div:nth-child(2) {
            display: none;
          }
        }
        .machine-parameter {
          width: 50%;
          height: 100%;
          & > div:nth-child(2) {
            display: none;
          }
        }
        .important-forecast-content {
          position: absolute;
          left: 18%;
          top: 5%;
          font-size: $guideFontSize;
          div {
            margin: 1rem 0;
          }
        }
      }
    }

    // 时序联动图一整张图片-start
    .linkageMap-content {
      width: 100%;
      height: 30vh;
      background: url("../images/linkageMap/map2.png") center no-repeat;
      background-size: contain;
      position: relative;
      &>img {
        position: absolute;
        display: inline-block;
        width: 8%;
      }
      img:nth-child(1) {
        top: 5%;
        right: 34%;
      }
      img:nth-child(2) {
        top: 5%;
        left: 34%;
      }
      img:nth-child(3) {
        top: 5%;
        left: 11%;
      }
      img:nth-child(4) {
        top: 31%;
        left: 11%;
      }
      img:nth-child(5) {
        bottom: 31%;
        left: 11%;
      }
      img:nth-child(6) {
        bottom: 4%;
        left: 11%;
      }
      img:nth-child(7) {
        bottom: 4%;
        left: 34%;
      }
      img:nth-child(8) {
        bottom: 4%;
        right: 37.5%;
      }
      img:nth-child(9) {
        bottom: 4%;
        right: 29%;
      }
      img:nth-child(10) {
        bottom: 4%;
        right: 11%;
      }
      img:nth-child(11) {
        bottom: 42%;
        right: 11%;
      }
      img:nth-child(12) {
        top: 5%;
        right: 11%;
      }
      img:nth-child(13) {
        bottom: 31%;
        left: 34%;
      }
      img:nth-child(14) {
        top: 32%;
        left: 34%;
      }
      img:nth-child(15) {
        bottom: 32%;
        right: 34%;
      }
      .agv,.robot {
        position: absolute;
        bottom: 8%;
        z-index: 1;
        height: auto;
        transform: scale(.5);
        font-size: 0.5vh;
      }
      .agv {
        left: 37%;
      }
      .robot {
        right: 10%;
      }
    }
    .content-center-important {
      .important-up {
        margin-top: 0;
      }
      .important-down {
        height: 50%;
      }
      .important-title {
        color: #00ffff;
        height: auto;
        font-size: $titleFontSize;
        width: 100%;
        text-align: center;
        padding: 1vh 0 2vh 0;
      }
    }
    // 时序联动图一整张图片-end

  }

  .content-right {
    width: 22.84vw;
    margin-right: 1.3vw;
    position: relative;
    overflow: hidden;

    #right-title {
      width: 2%;
      height: auto;
      position: absolute;
      top: 1%;
      left: 3%;
      background-color: transparent;
      color: #00ffff;
      font-size: $titleFontSize;
    }

    .right-center {
      background: url('../images/left-center.png') center no-repeat;
      background-size: 100% 100%;
      & > div:nth-child(2) {
        margin: 1.85vh 0;
      }
    }

    & > div {
      //margin: 1.85vh 0;
      margin: .6vh 0;
      padding: .6vh 0;
    }

    .content-right-yieldActPressure {
      width: 100%;
      height: 10.37vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      background: url("../images/right-up.png") center no-repeat;
      background-size: 100% 100%;

      div {
        width: 33%;
        height: 100%;
      }
      .yield div:first-child {
        background: url("../images/yield.png") center no-repeat;
        background-size: contain;
      }
      .activation div:first-child {
        width: 98% !important;
        height: 96% !important;
        background: url("../images/activation.png") center no-repeat;
        background-size: contain;
        margin-top: 3% !important;
      }
      .pressure div:first-child {
        background: url("../images/pressure.png") center no-repeat;
        background-size: contain;
      }

    }

    .content-right-yieldActivation {
      width: 100%;
      height: 16.44vh;
    }

    .content-right-outputNoise {
      width: 100%;
      height: 3.7vh;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;

      .output, .noise {
        width: 40%;
        height: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        background: url("../images/output.png") no-repeat;
        background-size: 100% 100%;
        font-size: $guideFontSize;

        span {
          //font-size: $titleFontSize;
          font-size: 1.85vh;
          color: #fbff7f;
        }
      }
    }

    .content-right-outputTrend {
      width: 100%;
      height: 14.58vh;
    }

    .content-right-IOT {
      width: 100%;
      height: 37vh;
      position: relative;
      background: url('../images/left-down.png') center no-repeat;
      background-size: 100% 100%;
      & > div {
        width: 60%;
        height: 3.47vh;
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        border-radius: .5vh;
        color: #fff;
        font-size: 1.11vh;
      }
      & > div:nth-child(2n+1) {
        background-color: #255fb3;
      }
      .right-IOT-2 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        img {
          width: 3.5%;
        }
      }
      .right-IOT-3 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        background-color: transparent !important;
        div {
          width: 30%;
          height: 100%;
          background-color: #255fb3;
          border-radius: .5vh;
        }
      }
      .right-IOT-6 {
        img {
          width: 3.5%;
        }
      }
      .right-IOT-7 {
        height: 20%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
        div {
          height: 100%;
        }
        .opc-client {
          width: 50%;
          background-color: #037BE3;
          border-radius: .5vh .5vh 0 0;
        }
      }
      .right-IOT-8 {
        img {
          width: 3.5%;
        }
      }
      .right-IOT-9 {
        width: 95%;
      }
      .right-IOT-10 {
        width: 95%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        margin-bottom: .5rem;
        img {
          width: 2.5%;
        }
      }
      .right-IOT-11 {
        width: 95%;
        background-color: transparent !important;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
        img {
          width: 15%;
        }
      }
      .IOT-guide {
        width: auto;
        display: block;
        position: absolute;
        right: 2%;
        top: 2%;
        font-size: $guideFontSize;
        & > div {
          height: auto;
          width: auto;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          align-items: center;
        }
      }
      .IOT-normal, .IOT-err {
        display: inline-block;
        width: 1vh;
        height: 1vh;
        border-radius: 1vh;
        margin: 0 .26vw;
      }
      .IOT-normal {
        background-color: #7fffaa;
      }
      .IOT-err {
        background-color: #ff4c76;
      }
    }
  }

}


